<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Apple (中国) - 官方网站</title>
  <meta name="description" content="探索 Apple 充满创新的世界，选购各式 iPhone、iPad、Apple Watch 和 Mac，浏览各种配件、娱乐产品，并获得相关产品的专家支持服务。" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="shortcut icon" type="image/ico" href="https://www.apple.com/cn/home/images/og-wechat.png" />
  <link rel="stylesheet" type="text/css" media="screen" href="./css/index.css" />
</head>

<body>
  <header>
    <nav>
      <ul class="nav">
        <li class="nav-item"><a href="#"></a></li>
        <li class="nav-item">
          <a href="#"> <span>Mac</span> </a>
        </li>
        <li class="nav-item">
          <a href="#"> <span>iPad</span> </a>
        </li>
        <li class="nav-item">
          <a href="#"> <span>iPhone</span> </a>
        </li>
        <li class="nav-item">
          <a href="#"> <span>Watch</span> </a>
        </li>
        <li class="nav-item">
          <a href="#"> <span>Music</span> </a>
        </li>
        <li class="nav-item">
          <a href="#"> <span>技术支持</span> </a>
        </li>
        <li id="searchit" class="nav-item"><a href="#"></a></li>
        <li class="nav-item"><a href="#"></a></li>
      </ul>
      <div id='search-cover' class="cover" style='display: none;'></div>
      <div class="searchbox-wrapper" id="searchboxWrapper">
        <div id='search-box' class="search-box" style='display: none;'>
          <div class="top">
            <input type="text" placeholder="搜索 apple.com" />
            <span id="search-cancel">&times;</span>
            <button />
          </div>
          <dl class="quick-link">
            <dt>快速链接</dt>
            <dd>查找零售店</dd>
            <dd>配件</dd>
            <dd>iPod</dd>
            <dd>AirPods</dd>
            <dd>佳节好礼</dd>
        </div>
      </div>
      </div>
    </nav>
  </header>
  <main>
    <section class="section-1">
      <div class="content">
        <h2>好时节，送礼物</h2>
        <p><a href="#">选购 <i class="rt">&rang;</i></a></p>
      </div>

      <div id="banner-wrapper">
        <div id="banner">
          <div class="pics"></div>
          <ul class="pic-num"></ul>
        </div>
      </div>
    </section>
    <section class="section-2">
      <div class="part">
        <div class="desc">
          <h2><span class="visuallyhidden">iPhone XR</span></h2>
          <h3>全面屏设计，iPhone 上最强的电池续航，出类拔萃的性能，<br />以及带来专业质感的照片功能。</h3>
          <p class="cart-link"><a href="#">进一步了解 <i class="rt">&rang;</i></a><a href="#">购买 <i class="rt">&rang;</i></a></p>
        </div>
        <div class="bg">
          <figure></figure>
        </div>
      </div>
      <div class="part">
        <div class="desc">
          <h2><span class="visuallyhidden">iPhone XS</span></h2>
          <h3>iPhone 上最大的超视网膜显示屏，性能出类拔萃的 A12 仿生，<br />安全性更进一步的面容 ID，以及支持景深控制的突破性双镜头<br />系统。</h3>
          <p class="cart-link"><a href="#">进一步了解 <i class="rt">&rang;</i></a><a href="#">购买 <i class="rt">&rang;</i></a></p>
        </div>
        <div class="bg">
          <figure></figure>
        </div>
      </div>
    </section>
    <section class="section-3">
      <div class="block">
        <h4 class="title">iPad Pro</h4>
        <h5 class="sub-title">全新，全面屏，全方位强大。</h5>
        <p class="cart-link"><a href="#">进一步了解 <i class="rt">&rang;</i></a><a href="#">购买 <i class="rt">&rang;</i></a></p>
      </div>

      <div class="block">
        <h4 class="title">让创意化作心意。</h4>
        <h5 class="sub-title">勇敢展露才华，用创意点亮世界。</h5>
        <p class="film" id="playvideo">立即观看
          <i>▶</i></p>
        <div class="video-wrapper" id='videoWrapper'>
          <span id="closeVideo" class="close-video">&times;</span>
          <video id="videoMedia" controls="controls" class="video-media-controller" crossorigin="anonymous" preload="auto"
            x-webkit-airplay="" aria-hidden="true" style="filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg) blur(0px);"
            src="https://www.apple.com/105/media/cn/holiday/2018/5b24a151_4795_46e3_bc8e_b58d111ed697/films/share-your-gifts/holiday-share-your-gifts-tpl-cn-2018_1280x720h.mp4">
            <source src="https://www.apple.com/105/media/cn/holiday/2018/5b24a151_4795_46e3_bc8e_b58d111ed697/films/share-your-gifts/holiday-share-your-gifts-tpl-cn-2018_1280x720h.mp4"></video>
        </div>
      </div>

      <div class="block">
        <h4 class="title logo-image"><span class="visuallyhidden">Apple Watch Series 4</span></h4>
        <h5 class="sub-title">焕然一新，<br />唤醒更好的你。</h5>
        <p class="cart-link"><a href="#">进一步了解 <i class="rt">&rang;</i></a><a href="#">购买 <i class="rt">&rang;</i></a></p>
      </div>

      <div class="block">
        <h4 class="title">Mac mini</h4>
        <h5 class="sub-title">全身大改造。</h5>
        <p class="cart-link"><a href="#">进一步了解 <i class="rt">&rang;</i></a><a href="#">购买 <i class="rt">&rang;</i></a></p>
      </div>

      <div class="block">
        <h4 class="title">MacBook Air</h4>
        <h5 class="sub-title">轻轻地，再次倾心。</h5>
        <p class="cart-link"><a href="#">进一步了解 <i class="rt">&rang;</i></a><a href="#">购买 <i class="rt">&rang;</i></a></p>
      </div>

      <div class="block">
        <h4 class="title giveback">Apple GiveBack<br />回馈计划</h4>
        <h5 class="sub-title">用你的设备以旧换新，获得折抵优惠。</h5>
        <p class="cart-link"><a href="#">进一步了解 <i class="rt">&rang;</i></a></p>
      </div>
    </section>
  </main>
  <footer>
    <div class="footer-wrapper">
      <div class="navigation">
        <dl>
          <dt>选购及了解</dt>
          <dd>Mac</dd>
          <dd>iPad</dd>
          <dd>iPhone</dd>
          <dd>Watch</dd>
          <dd>Music</dd>
          <dd>iTunes</dd>
          <dd>HomePod</dd>
          <dd>iPod touch</dd>
          <dd>配件</dd>
          <dd>App Store 充值卡</dd>
        </dl>
        <dl>
          <dt>App Store 商店</dt>
          <dd>查找零售店</dd>
          <dd>Genius Bar 天才吧</dd>
          <dd>Today at Apple</dd>
          <dd>Apple 夏令营</dd>
          <dd>Field Trip 课外活动</dd>
          <dd>Apple Store App</dd>
          <dd>翻新和优惠</dd>
          <dd>分期付款</dd>
          <dd>Apple Giveback 回馈计划</dd>
          <dd>订单状态</dd>
          <dd>订单状态选购帮助</dd>
        </dl>
        <dl>
          <dt>教育应用</dt>
          <dd>Apple与教育</dd>
          <dd>高校师生选购</dd>

          <dt>商务应用</dt>
          <dd>Apple与商务</dd>
          <dd>商务选购</dd>
        </dl>
        <dl>
          <dt>账户</dt>
          <dd>管理你的Apple ID</dd>
          <dd>Apple Store 账户</dd>
          <dd>iCloud.com</dd>

          <dt>Apple 价值观</dt>
          <dd>辅助功能</dd>
          <dd>环境责任</dd>
          <dd>隐私</dd>
          <dd>供应商责任</dd>
        </dl>
        <dl>
          <dt>关于Apple</dt>
          <dd>Newsroom</dd>
          <dd>Apple 管理层</dd>
          <dd>工作机会</dd>
          <dd>创造就业</dd>
          <dd>活动</dd>
          <dd>联系Apple</dd>
        </dl>
      </div>
      <div class="access">
        <p class="shop">
          更多选购方式：前往 <span class="nowrap"></span><a href="#">Apple Store 零售店</a></span>，致电 400-666-8800 或查找在你附近的<span
            class="nowrap"><a href="https://locate.apple.com/cn/zh/">授权经销商</a>。</span>
        </p>

        <div class="legal">
          <div class="copyright">Copyright ©
            2018
            Apple Inc. 保留所有权利。</div>
          <div class="links">
            <a class="legal-link" href="/cn/privacy/privacy-policy/">隐私政策</a>
            <a class="legal-link" href="/cn/legal/terms/site.html">使用条款</a>
            <a class="legal-link" href="/cn/shop/goto/help/sales_refunds">销售政策</a>
            <a class="legal-link" href="/cn/legal/">法律信息</a>
            <a class="legal-link" href="/cn/sitemap/">网站地图</a>
          </div>
        </div>

        <p style="margin-top:8px; padding-bottom:24px; color:#666;">京公安网安备&nbsp;11010502008968 <a href="http://www.miibeian.gov.cn/"
            target="_blank" style="color:#666;">京ICP备10214630</a>&nbsp;<a style="color:#666;" href="/cn/businesslicense/">营业执照</a></p>
      </div>
    </div>
  </footer>
</body>
<script src="./js/animation.js" type="text/javascript"></script>
<script src="./js/index.js" type="text/javascript"></script>

</html>